<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>雷锋热线</title>
    <style>
        ul{
            background: #0056b3;
            list-style-type: none; /*清除无序列表前的小点*/
            width: auto;
            height: 50px;
            text-align: center;
        }
        li{
            list-style-type: none;
            float: left;
            width: 130px;
            height: 100%;
            padding-left:15%;
            margin-right: 7%;  /*两个li之间的距离*/
        }
        a:link,a:visited{ /*鼠标未点击和点击过时的样式*/
            color: #FFFFFF;
            background-color: #0056b3;
            text-align: center;
            line-height: 50px; /*li行高*/
            padding: 10px;
            text-decoration: none; /*去下划线*/
        }
        a:hover{ /*鼠标移动到点击位时的样式，active指点击过后的样式*/
            color: #000; /* 鼠标悬停时文字颜色变为黑色 */
            border: 1px solid #409eff;
            /* color: #fff; */
            background: hsla(0,0%,97.3%,0.3);
            -webkit-transition: all .5s;
            transition: all .5s;
        }

        .lfrxTables button {
            color: #FFFFFF;
            background-color: #0056b3;
            text-align: center;
            font-size: 15px;
            width: 52px;
            height: 38px;
            font-family: Arial, sans-serif;
            border:none;
            text-decoration: none;
            cursor: pointer;
        }

        .lfrxTables button:hover {
            color: #000;
            border: 1px solid #409eff;
            background: hsla(0, 0%, 97.3%, 0.3);
            -webkit-transition: all .5s;
            transition: all .5s;
        }


        .lfrxTables table {
            font-family: Arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
            table-layout: fixed;
        }

        .lfrxTables table, tbody, td {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .lfrxTables th, td {
            border: 1px solid #dddddd;
            padding: 8px;
            text-align: center;
        }

        .lfrxTables th {
            background-color: #f2f2f2;
            font-weight: bold;
        }

        .lfrxTables tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .modal{
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background-color: rgba(0, 0, 0, 0.5);
        }
        .modal .container{
            width: 650px;
            height: 512px;
            background-color: #fff;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            box-sizing: border-box;
            border-radius: 6px;
            padding: 1em;
        }
        .modal .container .close{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            position: absolute;
            right: -10px;
            top: -10px;
            border: 2px solid #fff;
            cursor: pointer;
            background-color: deepskyblue;
            text-align: center;
            line-height: 30px;
        }
        .moadl .container td{
            height: 35px;
            border: 1px solid #ccc;
        }

        .modal .container tr:nth-child(even){
            background-color: #f9f9f9;
        }

        .modal .container td:first-child {
            font-weight: bold;
        }

        .modal .container textarea{
            font-size: 16px;
            font-family: Arial, sans-serif;
        }

        input[type="text"] {
            padding: 10px; /* 增加内边距 */
            border-radius: 5px; /* 圆角边框 */
            border: 2px solid #ccc; /* 边框 */
            font-size: 16px; /* 字体大小 */
            width: 300px; /* 设置文本输入框宽度 */
            margin-right: 20px; /* 设置右边距 */
            margin-bottom: 25px;
        }

        button[type="submit"] {
            padding: 10px 20px; /* 增加内边距 */
            border-radius: 5px; /* 圆角边框 */
            border: none; /* 移除默认边框 */
            background: linear-gradient(to left, #64B5F6, #BBDEFB); /* 天蓝色渐变背景色 */
            color: black; /* 文本颜色 */
            font-size: 16px; /* 字体大小 */
            cursor: pointer; /* 鼠标指针样式 */
            transition: background-color 0.3s; /* 过渡效果 */
            margin-bottom: 25px;
        }

        button[type="submit"]:hover {
            background: linear-gradient(to right, #64B5F6, #BBDEFB); /* 鼠标悬停时的渐变背景色 */
        }


    </style>

    <script>
        function showDetail(id, name, sex, phone, email, address, text){
            let modal = document.querySelector(".modal");
            modal.style.display="inherit";

            document.getElementById("detailId").innerText = id;
            document.getElementById("detailName").innerText = name;
            document.getElementById("detailSex").innerText = sex;
            document.getElementById("detailPhone").innerText = phone;
            document.getElementById("detailEmail").innerText = email;
            document.getElementById("detailAddress").innerText = address;
            document.getElementById("detailText").value = text;
        }

        function hideModal(){
            let modal = document.querySelector(".modal");
            modal.style.display="none";
        }

        window.onload = function() {
            let closeButton = document.querySelector(".modal .close");
            closeButton.addEventListener("click", hideModal);
        };

        function redirectToShow(){
            let lfrx_id = document.getElementById("lfrx_id");
            let lfrx_name = document.getElementById("lfrx_name");
            if(lfrx_id.value === "" && lfrx_name.value === ""){
                alert("请输入查找内容");
                return false;
            }else {
                if(lfrx_id.value !== "" && lfrx_name.value === ""){
                    document.getElementById("select").action = "/content/selectById_lfrx";
                    document.getElementById("select").submit();
                }else {
                    if(lfrx_id.value === "" && lfrx_name.value !== ""){
                        document.getElementById("select").action = "/content/selectByName_lfrx";
                        document.getElementById("select").submit();
                    }else {
                        if(lfrx_id.value !== "" && lfrx_id.value !== ""){
                            document.getElementById("select").action = "/content/select_lfrx";
                            document.getElementById("select").submit();
                        }
                    }
                }
            }
        }

    </script>
</head>
<body>
    <div class="modal" style="display: none;">
        <div class="container">
            <table>
                <tr>
                    <td>
                        编号
                    </td>
                    <td id="detailId"></td>
                </tr>
                <tr>
                    <td>
                        姓名
                    </td>
                    <td id="detailName"></td>
                </tr>
                <tr>
                    <td>
                        性别
                    </td>
                    <td id="detailSex"></td>
                </tr>
                <tr>
                    <td>
                        电话号码
                    </td>
                    <td id="detailPhone"></td>
                </tr>
                <tr>
                    <td>
                        电子邮箱
                    </td>
                    <td id="detailEmail"></td>
                </tr>
                <tr>
                    <td>
                        地址
                    </td>
                    <td id="detailAddress"></td>
                </tr>
                <tr>
                    <td height="70px">
                        事迹
                    </td>
                    <td>
                        <textarea id="detailText" cols="60" style="resize: none; height: 120px">
                        </textarea>
                    </td>
                </tr>
            </table>
            <div class="close">
                X
            </div>
        </div>
    </div>
    <ul>
        <li><a href="/content/index_administrator"> 文明山西 </a></li>
        <li><a href="/content/LFRX_administrator"> 雷锋热线 </a></li>
        <li><a href="/administrator/exit"> 退出登录 </a></li>
    </ul>

    <form id="select" name="form-select" method="get" enctype="application/x-www-form-urlencoded" align="center">
        <input id="lfrx_id" name="lfrx_id" type="text" placeholder="请输入要查看的编号">
        <input id="lfrx_name" name="lfrx_name" type="text" placeholder="请输入要查看的姓名">
        <button type="submit" onclick="return redirectToShow()">查询</button>
    </form>

    <div class="lfrxTables">
        <table>
            <thead>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>电话号码</th>
            <th>电子邮箱</th>
            <th>地址</th>
            <th>事迹</th>
            <th>创建时间</th>
            <th>操作</th>
            </thead>
            <tbody>
            <tr th:each="c:${content_lfrx}">
                <td th:text = "${c.lfrx_id}"></td>
                <td th:text = "${c.name}"></td>
                <td th:text = "${c.sex}"></td>
                <td th:text = "${c.phone}"></td>
                <td th:text = "${c.email}"></td>
                <td th:text = "${c.address}"></td>
                <td th:text = "${c.text}"></td>
                <td th:text = "${#dates.format(c.create_time, 'yyyy-MM-dd HH:mm')}"></td>
                <td>
                    <button th:onclick="showDetail([[${c.lfrx_id}]],[[${c.name}]],[[${c.sex}]],[[${c.phone}]],[[${c.email}]],[[${c.address}]],[[${c.text}]])">详细</button>
                    <a th:href="@{'/content/delete_lfrx'(lfrx_id=${c.lfrx_id})}" onclick="return confirm('确认删除？');">删除</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</body>
</html>